<template>
  <div id="auth-page">
    <!-- 星空背景 -->
    <div class="starsec"></div>
    <div class="starthird"></div>
    <div class="starfourth"></div>
    <div class="starfifth"></div>

    <div class="top-header"></div>

    <div id="mainContainer">
      <!-- 卡片容器 -->
      <div class="card-container" :class="{ flipped: !isLogin }">
        <!-- 登录表单 -->
        <div class="card front">
          <h2>登录</h2>
          <form @submit.prevent="handleLogin">
            <div class="input-group">
              <input v-model="loginForm.username" type="text" placeholder="用户名" required />
            </div>
            <div class="input-group">
              <input v-model="loginForm.password" type="password" placeholder="密码" required />
            </div>
            <button type="submit" class="login-btn">登录</button>
          </form>

          <div class="options">
            <span>没有账号？</span>
            <a href="javascript:void(0)" @click="toggleMode">去注册</a>
          </div>

          <div class="social-login">
            <button><i class="fab fa-weixin"></i></button>
            <button><i class="fab fa-qq"></i></button>
            <button><i class="fab fa-github"></i></button>
          </div>
        </div>

        <!-- 注册表单 -->
        <div class="card back">
          <h2>注册</h2>
          <form @submit.prevent="handleRegister">
            <div class="input-group">
              <input v-model="registerForm.username" type="text" placeholder="用户名" required />
            </div>
            <div class="input-group">
              <input v-model="registerForm.email" type="email" placeholder="邮箱" required />
            </div>
            <div class="input-group">
              <input v-model="registerForm.password" type="password" placeholder="密码" required />
            </div>
            <div class="input-group">
              <input
                v-model="registerForm.confirmPassword"
                type="password"
                placeholder="确认密码"
                required
              />
            </div>
            <button type="submit" class="login-btn">注册</button>
          </form>

          <div class="options">
            <span>已有账号？</span>
            <a href="javascript:void(0)" @click="toggleMode">返回登录</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'

const isLogin = ref(true)

const loginForm = reactive({
  username: '',
  password: '',
})

const registerForm = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
})

const handleLogin = () => {
  console.log('登录信息:', loginForm)
  alert(`登录成功: 用户名=${loginForm.username}`)
}

const handleRegister = () => {
  if (registerForm.password !== registerForm.confirmPassword) {
    alert('两次输入的密码不一致！')
    return
  }
  console.log('注册信息:', registerForm)
  alert(`注册成功: 用户名=${registerForm.username}`)
}

const toggleMode = () => {
  isLogin.value = !isLogin.value
}
</script>

<style>
html,
body,
#app,
#auth-page {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
  background: #181828;
  color: #fff;
  overflow: hidden;
}
</style>

<style scoped>
/* 星空背景 */
.starsec,
.starthird,
.starfourth,
.starfifth {
  position: absolute;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow:
    100px 200px #fff,
    300px 600px #fff,
    700px 900px #fff;
  animation: animStar 50s linear infinite;
}
.starthird {
  animation-duration: 100s;
}
.starfourth {
  animation-duration: 150s;
}
.starfifth {
  animation-duration: 200s;
}

@keyframes animStar {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-2000px);
  }
}

.top-header::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(270deg, #00e4d0, #5983e8);
}

#mainContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

/* 卡片翻转容器 */
.card-container {
  width: 100%;
  max-width: 400px;
  height: 450px;
  perspective: 1000px;
  position: relative;
  transform-style: preserve-3d; /* ✅ 关键：启用 3D 翻转 */
}

.card {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
  backface-visibility: hidden; /* ✅ 背面不可见 */
  transition: transform 0.8s;
  text-align: center;
}

.card.front {
  transform: rotateY(0deg);
}

.card.back {
  transform: rotateY(180deg);
}

.card-container.flipped .front {
  transform: rotateY(-180deg);
}

.card-container.flipped .back {
  transform: rotateY(0deg);
}

.input-group {
  margin: 15px 0;
}

.input-group input {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  outline: none;
  font-size: 16px;
}

.login-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 25px;
  background: #00e4d0;
  color: #000;
  font-size: 16px;
  cursor: pointer;
  margin-top: 20px;
  transition: all 0.3s;
}

.login-btn:hover {
  background: #5983e8;
  color: #fff;
}

.options {
  margin-top: 15px;
  font-size: 14px;
}

.options a {
  color: #00e4d0;
  margin-left: 5px;
  cursor: pointer;
}

.social-login {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 15px;
}

.social-login button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #222;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
}

.social-login button:hover {
  background: #00e4d0;
  color: #000;
}
</style>
